<!--
 * @Description: App
 * @Author: rendc
 * @Date: 2023-02-24 09:18:02
 * @LastEditors: 刘霞 2598673534@qq.com
 * @LastEditTime: 2023-03-06 19:47:40
-->
<script setup>
  import { ref } from "vue";
  const active = ref(0);
  const onClickLeft = () => history.back();
  const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 0; i++) {
          list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 0) {
          finished.value = true;
        }
      }, 1000);
    };


</script>

<template>
<div class="navbar">
<van-nav-bar
    title="OPPO"
    left-arrow
    @click-left="onClickLeft"
/>
</div>
<div class="tabs">
    <van-tabs v-model:active="activeName">
        <van-tab title="OPPO Find N系列" name="a">
            <div class="main">
                <div class="content1">
                    <van-card
                        price="8989"
                        desc="超轻折叠设计"
                        title="OPPO Find N2"
                        thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221215/b6052c277cc9d8f7f553ffcd56036245-1711869841.png?_w_=320&_h_=320&x-oss-process=image/format,webp"
                        >
                        <template #tags>
                            <van-tag plain type="primary">12期免息</van-tag>
                            <van-tag plain type="primary">满700减10</van-tag>
                        </template>
                        </van-card>

                    </div>
                <div class="content2">
                    <van-card
                        price="6389"
                        desc="独创大外屏"
                        title="OPPO Find N2 Flip"
                        thumb="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230202/46ca2df8e6ea7815165c5e9eb9ef2f84-1958657745.png?_w_=320&_h_=320&x-oss-process=image/format,webp"
                        >
                        <template #tags>
                            <van-tag plain type="primary">12期免息</van-tag>
                            <van-tag plain type="primary">满700减10</van-tag>
                        </template>
                        </van-card>
                    </div>
                    <div class="content3">
                        <van-card
                        price="6989"
                        desc="黄金折叠比例"
                        title="OPPO Find N"
                        thumb="https://dsfs.oppo.com/archives/202112/2021121505125961b9bc9febd0e.png?_w_=320&_h_=320&x-oss-process=image/format,webp"
                        >
                        <template #tags>
                            <van-tag plain type="primary">12期免息</van-tag>
                            <van-tag plain type="primary">满700减10</van-tag>
                        </template>
                        </van-card>
                    </div>
                <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
                <van-cell v-for="item in list" :key="item" :title="item" />
            </van-list>
      
        
            </div>
        </van-tab>
            
        <van-tab title="OPPO Find X系列" name="b">内容 2</van-tab>
        <van-tab title="OPPO Reno系列" name="c">内容 3</van-tab>
        <van-tab title="OPPO K系列" name="d">内容 4</van-tab>
        <van-tab title="OPPO A系列" name="e">内容 5</van-tab>
        <van-tab title="OPPO 平板" name="f">内容 6</van-tab>
        <van-tab title="Enco X系列" name="g">内容 7</van-tab>
        <van-tab title="Enco Free系列" name="h">内容 8</van-tab>
        <van-tab title="Enco Air系列" name="i">内容 9</van-tab>
        <van-tab title="OPPO Watch SE系列" name="j">内容 10</van-tab>
        <van-tab title="OPPO Watch3系列" name="k">内容 11</van-tab>
        <van-tab title="OPPO Watch2系列" name="l">内容 12</van-tab>
        <van-tab title="OPPO 手环" name="m">内容 13</van-tab>
     
     
</van-tabs>

</div>


</template>

<style lang="less" scoped>
.van-nav-bar__title{
    .van-ellipsis{
    width: 49.125px;
    height: 46px;
    }
}
.main{
    background-color:#f7f4f4d8;
    padding-bottom: 55px;
    padding-top: 42px;
    .content1{
        width: 343px;
        height: 131.234;
        background-color: white;
        margin-left: 16px;
        margin-right: 16px;
        .van-card{
            width: 351px;
            height: 125px;
            background-color: white;
        }
        }
        .content2{
        width: 343px;
        height: 131.234;
        background-color: white;
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 20px;
        .van-card{
            width: 351px;
            height: 125px;
            background-color: white;
        }
        }
        .content3{
        width: 343px;
        height: 131.234;
        background-color: white;
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 20px;
        .van-card{
            width: 351px;
            height: 125px;
            background-color: white;
        }
        }
    }
</style>
<style>
:root{
    --van-nav-bar-title-text-color:rgba(0, 0, 0, 0.85);
    --van-nav-bar-title-font-size:17px;
    --van-card-thumb-size:100px;
    --van-card-price-color:red;
   
}
</style>
